<template>
  <div class="wrapper">
    <router-link to='/'>
      <div class="iconfont">&#xe62d;</div>
    </router-link>
    <swiper :options="swiperOption">
        <!-- slides -->
        <swiper-slide v-for='item of imgList' :key='item.id'>
            <div class="box">{{item.desc}}</div>
        </swiper-slide>
        <!-- Optional controls -->
        <div class="swiper-pagination"  slot="pagination"></div>
    </swiper>
  </div>
</template>

<script>
export default {
  name: 'DetailTop',
  data () {
    return {
      swiperOption: {
        pagination: '.swiper-pagination',
        loop: true,
        autoplay: false
      },
      imgList: [{
        id: '1',
        desc: '图片1'
      }, {
        id: '2',
        desc: '图片2'
      }, {
        id: '3',
        desc: '图片3'
      }]
    }
  }
}
</script>

<style lang='stylus' scoped>
.wrapper
  position relative
  .iconfont
    position absolute
    z-index 999
  .box
    width 100%
    height 5rem
    border 1px solid #20B2AA
    text-align center
</style>
